<template>
    <view>
        <view class="dddd" @click="_onClick" style="">
            <view style="display: flex;justify-content: center;align-items: center;line-height: 55px;">
                <text class="lg  cuIcon-move" style="color: #FFFFFF;font-size: 26px;"></text>
            </view>
            <!-- <view class="uni-fab__content uni-fab__content--right uni-fab__content--other-platform"
                style="width: 55px; height: 55px; background-color: rgb(255, 255, 255);">
                <view class="uni-fab__item uni-fab__item--first"></view>
            </view> -->
        </view>
        <!-- <view @click="_onClick"
            class="uni-fab__circle uni-fab__plus uni-fab__circle--rightBottom uni-fab__content--other-platform"
            style="background-color: rgb(60, 62, 73);">
            <view class="fab-circle-v"></view>
            <view class="fab-circle-h"></view>
        </view> -->
    </view>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            _onClick() {
                this.$emit('fabClick')
            },
        }
    }
</script>
<style lang="scss" scoped>
    .uni-fab {
        position: fixed;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    /* .uni-fab--active {
        opacity: 1;
    } */






    .uni-fab__circle {
        position: fixed;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        background-color: #3c3e49;
        border-radius: 55px;
        z-index: 11;
    }

    .uni-fab__circle--rightBottom {
        right: 15px;
        bottom: 30px;
        /* #ifdef H5 */
        bottom: calc(30px + var(--window-bottom));
        /* #endif */
    }

    .uni-fab__circle--rightTop {
        right: 15px;
        top: 40px;
        /* #ifdef H5 */
        top: calc(40px + var(--window-top));
        /* #endif */
    }

    .uni-fab__circle--left {
        left: 0;
    }

    .uni-fab__circle--right {
        right: 0;
    }

    .uni-fab__circle--top {
        top: 0;
    }

    .uni-fab__circle--bottom {
        bottom: 0;
    }

    .uni-fab__plus {
        font-weight: bold;
    }

    .fab-circle-v {
        position: absolute;
        width: 3px;
        height: 31px;
        left: 26px;
        top: 12px;
        background-color: white;
        transform: rotate(0deg);
        transition: transform 0.3s;
    }

    .fab-circle-h {
        position: absolute;
        width: 31px;
        height: 3px;
        left: 12px;
        top: 26px;
        background-color: white;
        transform: rotate(0deg);
        transition: transform 0.3s;
    }

    .uni-fab__plus--active {
        transform: rotate(135deg);
    }

    .uni-fab__content {
        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        display: flex;
        /* #endif */
        flex-direction: row;
        border-radius: 55px;
        overflow: hidden;
        transition-property: width, height;
        transition-duration: 0.2s;
        width: 55px;
        border-color: #DDDDDD;
        border-width: 1rpx;
        border-style: solid;
    }

    .uni-fab__content--other-platform {
        border-width: 0px;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    }

    .uni-fab__content--left {
        justify-content: flex-start;
    }

    .uni-fab__content--right {
        justify-content: flex-end;
    }

    .uni-fab__content--flexDirection {
        flex-direction: column;
        justify-content: flex-end;
    }

    .uni-fab__content--flexDirectionStart {
        flex-direction: column;
        justify-content: flex-start;
    }

    .uni-fab__content--flexDirectionEnd {
        flex-direction: column;
        justify-content: flex-end;
    }

    .uni-fab__item {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .uni-fab__item--active {
        opacity: 1;
    }

    .uni-fab__item-image {
        width: 25px;
        height: 25px;
        margin-bottom: 3px;
    }

    .uni-fab__item-text {
        color: #FFFFFF;
        font-size: 12px;
    }

    .uni-fab__item--first {
        width: 55px;
    }

    .dddd {
        height: 55px;
        width: 55px;
        position: fixed;
        border-radius: 50%;
        right: 5px;
        bottom: 20px;
        /* #ifdef H5 */
        bottom: calc(20px + var(--window-bottom));
        /* #endif */
        border-width: 0px;
        background-color: #bd5041;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    }
</style>